<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 800px;
            height: 800px;
            /* background-color 背景颜色*/
            background-color: aqua;

            /* background-image  背景图片 */
            background-image: url(../img/一人之下.webp);

            /* background-repeat 背景图片平铺 */
            /* 取值一共四种：no-repeat不平铺 repeat平铺 repeat-x以x轴横向平铺 repeat-y以y轴纵向平铺*/
            background-repeat: no-repeat;
            /* background-position 背景图片位置 */
            /* 以方位名词来： 
            1.水平方向 ： left左 center中间 right右
              垂直方向 ： top顶部 center中间 bottom下方
            2.数字 + px(坐标) ：
              原点（0，0）为盒子的左上方  x轴 水平向右  y轴 垂直向下
             */
            background-position: center center;

            /* background 连写 推荐顺序为 颜色color 图片 平铺 位置  */
            background: red url(../img/一人之下.webp) no-repeat center center;
        }

    </style>
</head>
<body>
    <div></div>
    
</body>
</html>